import i18n from '@/i18n'
import Vue from 'vue'

let vueI18n = new Vue({
  i18n
})

// 创建canvas实例
const iCanvas = function () {
  // 基本配置
  let freqConfig = {}
  // 返回实例
  let iFreq = {}
  // canvas的element
  let container = null
  // canvas的context
  let iContext = {}
  let cwidth = null
  let cheight = null

  freqConfig.tipTitle = '#999' // 弹出框 标题字体颜色
  freqConfig.tipContent = '#eee' // 弹出框 内容字体颜色
  freqConfig.tipTitleFont = 'bold 12px Arial' // 弹出框 标题字体格式
  freqConfig.tipContentFont = 'normal 12px Arial'// 弹出框 内容字体格式
  freqConfig.tipColor = 'rgba(0,0,0,0.5)'// 弹出框 背景颜色f3f3f3
  freqConfig.degreeColor = '#000'// x、y轴刻度字体颜色
  freqConfig.degreeFont = 'normal 12px Arial' // 设置为 10px 便于计算
  freqConfig.arisColor = '#ccc'// 坐标轴颜色
  freqConfig.showTip = false // 是否绘制tip判断

  freqConfig.mousePos = {
    x: '',
    y: '',
    getMousePos (canvas, evt) {
      var rect = canvas.getBoundingClientRect()
      return {
        x: evt.clientX - rect.left * (canvas.width / rect.width),
        y: evt.clientY - rect.top * (canvas.height / rect.height)
      }
    }
  }

  // canvas初始化
  iFreq['init'] = function (element) {
    cwidth = element.offsetWidth // 画布宽度
    cheight = element.offsetHeight - 30 // 画布高度
    // eslint-disable-next-line
    element.innerHTML = `<canvas id="freqContainer" style="z-index:1000;position:relative" width=${cwidth} height=${cheight} >` // 将canvas 画布放入wrap层中
    container = document.getElementById('freqContainer')
    if (container.getContext) { // 判断浏览器对canvas的兼容性
      iContext = container.getContext('2d')
    } else {
      // 您的浏览器不支持canvas标签,如需使用本功能,请更换浏览器！
      alert(vueI18n.$t('message.freqLineChart.message.msg1'))
    }
    // 鼠标移动事件绑定
    container.addEventListener('mousemove', function (eve) {
      // 获取鼠标位置
      freqConfig.mousePos.x = freqConfig.mousePos.getMousePos(container, eve).x
      freqConfig.mousePos.y = freqConfig.mousePos.getMousePos(container, eve).y
      freqConfig.showTip = true
      // 重新绘制canvas
      iFreq.drawCanvas()
    }, false)
  }

  // canvas参数设置
  iFreq['setOption'] = function ({ beginFreq, endFreq, freqs }) {
    freqConfig.beginFreq = beginFreq
    freqConfig.endFreq = endFreq
    freqConfig.freqs = freqs
    iFreq.drawCanvas()
  }

  // canvas绘图
  iFreq.drawCanvas = function () {
    iContext.clearRect(0, 0, 1000000, 1000000)// 清理canvas画布
    iContext.strokeStyle = '#000000'// 设置坐标轴颜色
    iContext.beginPath()// 开始路径绘制
    iContext.lineWidth = 1
    iContext.moveTo(0, cheight - 15)// 绘制x轴 由于canvas 存在 1px 模糊的问题 加0.5 进行解决
    iContext.lineTo(cwidth, cheight - 15)
    iContext.moveTo(0, 0)// 绘制y轴
    iContext.lineTo(0, cheight - 14.5)// 留10像素 进行文本绘制
    iContext.stroke()// 结束路径绘制
    iContext.fillStyle = freqConfig.degreeColor// 设置刻度线文字颜色
    iContext.font = freqConfig.degreeFont// 设置坐标文本字体格式
    let block = cwidth / 10 // 每格文本的间距
    let degreeFre = (freqConfig.endFreq - freqConfig.beginFreq) / 10// 等分的每格文本值
    // 对文本进行绘制
    for (let i = 0; i <= 11; i++) {
      iContext.fillText(freqConfig.beginFreq + degreeFre * i + 'K', block * i, cheight - 3)
    }
    let degree = (freqConfig.endFreq.toString().length - (freqConfig.endFreq.toString().includes('.')
      ? 1 : 0)) * 6.5 + 14// 计算终止频点文本的宽度
    iContext.fillText(freqConfig.endFreq + 'K', cwidth - degree, cheight - 3)
    // iContext.fillText('说大佛寺京东方' + 'M', cwidth - 96, cheight - 3)
    // 虚线数量变量
    let xnum = 4
    let ynum = 10
    for (let i = 1; i < xnum; i++) { // x轴虚线
      iContext.beginPath()
      iContext.lineWidth = 1
      iContext.strokeStyle = freqConfig.arisColor
      iContext.moveTo(0, (cheight - 15) / xnum * i)
      iContext.lineTo(cwidth, (cheight - 15) / xnum * i)
      iContext.stroke()
    }

    for (let i = 1; i <= ynum; i++) { // y轴虚线
      iContext.beginPath()
      iContext.lineWidth = 1
      iContext.strokeStyle = freqConfig.arisColor
      iContext.moveTo(cwidth / ynum * i, 0)// 绘制y轴
      iContext.lineTo(cwidth / ynum * i, cheight - 14.5)// 留10像素 进行文本绘制
      iContext.stroke()
    }
    if (freqConfig.freqs.length > 0) {
      for (let i = 0; i < freqConfig.freqs.length; i++) {
        drawFreq(freqConfig.freqs[i])
      }
    }
    // 绘制频率曲线
    function drawFreq (freq) {
      // 制高点变换
      let changex = -freq.workFreq + cheight - 20
      // 颜色自定义
      iContext.fillStyle = freq.fillStyle
      iContext.strokeStyle = freq.strokeStyle
      // if (typeof (freq.colorType) === undefined) {
      //   iContext.fillStyle = '#eee'
      //   iContext.strokeStyle = '#eee'
      // }
      let xxx = (freq.centerFreq) - (freq.bandWidth) / 2 - freqConfig.beginFreq
      xxx = xxx / degreeFre * block// 起始点

      let xxxx = (freq.centerFreq) - freqConfig.beginFreq
      xxxx = xxxx / degreeFre * block// 制高点

      let xxxxx = (freq.centerFreq) + (freq.bandWidth) / 2 - freqConfig.beginFreq
      xxxxx = xxxxx / degreeFre * block// 结束点

      // let w = freq.bandWidth / degreeFre * block// 图形宽度

      iContext.beginPath()
      iContext.lineWidth = 2// 设置曲线线宽
      iContext.moveTo(xxx, cheight - 15)
      iContext.quadraticCurveTo(xxxx, changex, xxxxx, cheight - 15) // 二次贝塞尔曲线
      iContext.fill() // 区域填充
      iContext.stroke()// 描边
    }
    // 绘制tip
    if (freqConfig.showTip === true) {
      // 设置tip样式
      iContext.fillStyle = freqConfig.tipColor
      // 贝塞尔曲线二次方公式
      // B(t) = (1-t)*(1-t)*p0 + 2*t*(1-t)*p1+t*t*p2,t∈[0,1];
      let tipWidth = 180// 固定住宽度 防止后期出现带宽过大从而影响弹框大小
      for (let i = 0; i < freqConfig.freqs.length; i++) {
        let radius = freqConfig.freqs[i].bandWidth / 2
        let startPoint = (freqConfig.freqs[i].centerFreq - radius - freqConfig.beginFreq) / degreeFre * block
        let endPoint = (freqConfig.freqs[i].centerFreq + radius - freqConfig.beginFreq) / degreeFre * block
        // 信道类型 vueI18n.$t('message.freqLineChart.message.msg1')
        // 未知
        let channelType = vueI18n.$t('message.freqLineChart.channelType.typeUnkown')
        if (freqConfig.freqs[i].type === 'ctrlTdm') {
          // 前向控制信道
          channelType = vueI18n.$t('message.freqLineChart.channelType.type1')
        } else if (freqConfig.freqs[i].type === 'ctrlAloha') {
          // 反向控制信道
          channelType = vueI18n.$t('message.freqLineChart.channelType.type2')
        } else if (freqConfig.freqs[i].type === 'traffic') {
          // 业务信道
          channelType = vueI18n.$t('message.freqLineChart.channelType.type3')
        } else {
          // 未知
          channelType = vueI18n.$t('message.freqLineChart.channelType.typeUnkown')
        }
        if (freqConfig.mousePos.x > startPoint && freqConfig.mousePos.x < endPoint) {
          if (cheight - freqConfig.mousePos.y - 11.5 < 160 && cheight - freqConfig.mousePos.y - 11.5 > 0) {
            // tip绘制起始点，判断是否超出右边界
            let tipStartPoint = freqConfig.mousePos.x
            if ((cwidth - freqConfig.mousePos.x) < 170) {
              tipStartPoint = freqConfig.mousePos.x - 180
            }
            let yAxisStart = 15
            let yAxisSpacing = 18
            iContext.fillRect(tipStartPoint + 15.5, 0, tipWidth, 80)
            iContext.fillStyle = '#ffffff'
            iContext.font = freqConfig.tipContentFont
            // 信道类型
            iContext.fillText(vueI18n.$t('message.freqLineChart.form.label1') + channelType, tipStartPoint + 26.5, yAxisStart)
            // iContext.fillText('使用者：  ' + freqConfig.freqs[i].user, tipStartPoint + 26.5, yAxisStart + yAxisSpacing * 1)
            // 中心频点
            iContext.fillText(vueI18n.$t('message.freqLineChart.form.label2') + freqConfig.freqs[i].centerFreq + '  KHz', tipStartPoint + 26.5, yAxisStart + yAxisSpacing * 1)
            // 带宽
            iContext.fillText(vueI18n.$t('message.freqLineChart.form.label3') + freqConfig.freqs[i].bandWidth + '  KHz', tipStartPoint + 26.5, yAxisStart + yAxisSpacing * 2)
            // 功率
            iContext.fillText(vueI18n.$t('message.freqLineChart.form.label4') + freqConfig.freqs[i].workFreq + '  dbw', tipStartPoint + 26.5, yAxisStart + yAxisSpacing * 3)
            break
          }
        }
      }
    }
  }
  return iFreq
}

export default iCanvas
